<template>
    <div class="Container">
        <div class="recommend">
            <div class="header">
                <p class="left">全场换购</p>
                <p class="right">已满1件，可选择10件商品换购&nbsp;<span>去换购 ></span></p>
            </div>
        </div> 
        
        <div  v-for="(cartInfo,index) in cartInfoList" :id="cartInfo.id"  :key="cartInfo.id">
            <van-checkbox :name="cartInfo.id" icon-size="16px" v-model="cartInfo.isChecked" @click="checkCartState(cartInfo)" />
            <!-- van-card问题：原来在复选框内包着card，card有冒泡事件，故点击卡片内任意位置，都会冒泡到外边 解决：把card挪出来 不要放在复选框内了 -->
                <van-swipe-cell > 	
                    <van-card 
                        :price="cartInfo.cartPrice"
                        :title="cartInfo.skuName"
                        class="goods-card"
                        :thumb="cartInfo.imgUrl"    
                    >
                        <template #num>
                            <!-- 步进器问题：点一个商品的数量 另几个商品数量也跟着改变 解决：v-model绑定每个商品请求到的数据上的数量 -->
                            <van-stepper v-model="cartInfo.skuNum" theme="round" button-size="22"  disable-input @plus="addshopCart(cartInfo.id)" @minus="minCart(cartInfo.id,cartInfo.skuNum)"></van-stepper>
                        </template>  
                    </van-card >
                    
                    
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" @click="delGoods(cartInfo.skuId)" />
                    </template> 
                </van-swipe-cell>
        </div>
        <van-submit-bar :price="allMoney" button-text="结算" @submit="onSubmit" >
            <van-checkbox v-model="checkAll">全选</van-checkbox>
        </van-submit-bar>
        
        
    </div>
    
</template>

<script lang="ts" setup>
import {  reqChangeAllCartState , reqDelOneShopCartGoods,reqUpdateShopCartListData,reqAddOrUpdateCart} from '../../api/shopCart'
import { ref , onMounted,computed,reactive } from "vue"
import {useRouter} from 'vue-router'
import {useShopStore} from "../../store/shop"
import { storeToRefs } from "pinia";
const shopStore = useShopStore()

// storeToRefs 拿过来的数据是响应式的 所以用起来应该是.value
const { cartInfoList} = storeToRefs(shopStore)||[];

const router = useRouter()
// 存储isChecked为1的商品
const result = ref([])

const skuIdList = reactive([])


    onMounted(async ()=>{
        const cartInfoListData = await shopStore.getShopCartListData()
        // 遍历选中状态 添加进存储状态的数组中
        cartInfoListData?.map(item=>{
            return item.isChecked === 1? result.value.push(item) : ''
        })   
    })

    // 单选
    // 单选更新购物车选中状态
    const checkCartState = async(cartInfo:any)=>{
        cartInfo.isChecked = 1-cartInfo.isChecked
        await reqUpdateShopCartListData(cartInfo.skuId,cartInfo.isChecked)
    }

    // 步进器+1
    const addshopCart = async(id:Number)=>{
        let disNum = 1
        // console.log(id,disNum);
        await reqAddOrUpdateCart(id,disNum)
    }

    // 步进器-1
    const minCart = async(id)=>{
        let disNum = -1
        await reqAddOrUpdateCart(id,disNum)
    }

     // 全选
     const checkAll = computed({
        get(){
            return cartInfoList.value.every(item=>item.isChecked )
        },
        async set(val){
            // 更新购物车全选状态
            cartInfoList.value.forEach(item => {
            // 新状态是true，就是1 不是true 就是0 遍历购物车 将新状态一一赋值
            item.isChecked = val ? 1 : 0;
            // 把每一项放到商品id数组中 以备批量更新状态时传参
            skuIdList?.push(item.skuId);
          });
            // 因为skuIdList数组 被proxy包裹 不可以调用接口时直接传参
            // 用此方法可以直接拿到被proxy包裹的数据  
            const res = JSON.parse(JSON.stringify(skuIdList))
            // 统一批量更新选中状态
           await reqChangeAllCartState(val?1:0,res);
           
        }
    })


    // 删除
    const delGoods = async(skuId)=>{
        const goods = cartInfoList.value?.filter(item=>item.skuId === skuId)
        await reqDelOneShopCartGoods(skuId)
        await shopStore.getShopCartListData()
    }
	
    // 总价
    let allMoney = computed(()=>{ 
        return cartInfoList.value?.reduce((prev,item)=>{
            // 选中则累加
            if(item.isChecked){
                prev += item.cartPrice*100*item.isChecked*item?.skuNum
            }
            return prev
        },0)	
    })
    
    
    // 结算跳转
    const onSubmit = ()=>{
        router.push({ path: "/pay" })
    }

</script>

<script lang="ts">
export default{
    name:"shopCart"
}
</script>

<style lang="less" scoped>
 .Container{
    background-color: #eee;
    height: 100vh;
    .recommend{
        width: 100vw;
        height: 100px;
        margin: 10px auto;
        background: #fff;
        border-radius: 10px;
    } 
 }

 .van-checkbox {
    margin-top: 15px;
    border-radius: 0.26667rem;
    margin-bottom: -8.73333px;
    background-color: #fff;
}


:deep(.van-checkbox__label){
    flex: 1;
    margin-left: 0;
}

.van-checkbox[data-v-0b76121c] {
    border-radius: 0.26667rem;
    margin-bottom: -8.73333px;
    background-color: #fff;
}
.van-card{
    background-color: #fff;
}
.van-card .goods-card{
    padding-left: 0;
}
:deep(.van-card__price){
    color: red;
}
.delete-button {
    height: 100%;
}
:deep(.van-checkbox__icon.van-checkbox__icon--round) {
    padding-left: 6px;
}

:deep(.van-checkbox__icon.van-checkbox__icon--round.van-checkbox__icon--checked) {
    padding-left: 6px;
}

.van-submit-bar{
    bottom:49px
}

:deep(.van-checkbox__icon.van-checkbox__icon--round.van-checkbox__icon--checked){
    margin-bottom: 20px;
}

.address{
    width: 90%;   
    background-color: #fff;
    margin-bottom: 30px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    .addAddress{
        font-size: 30px;
        font-weight: bold;
        height: 70px;
    }
    :deep(.van-address-item) {
            padding: 0;
        }
}
:deep(.van-address-list__bottom){
    bottom: 100px;
}
:deep(button.van-button.van-button--danger.van-button--normal.van-button--round.van-submit-bar__button.van-submit-bar__button--danger ){
    margin-left: 100px;
}

:deep([data-v-0b76121c] button.van-button.van-button--danger.van-button--normal.van-button--round.van-submit-bar__button.van-submit-bar__button--danger) {
    margin-left: 0; 
}


/*
.van-checkbox[data-v-0b76121c] {
    border-radius: 0.26667rem;
    margin-bottom: -8.73333px;
    background-color: #fff;
}
*/ 
</style>